<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<#include "/resource.ftl"/>
</head>
<body class="hold-transition skin-purple-light sidebar-mini">
<div class="wrapper">
<#assign selectindex=3 />
<#assign selectchild=1 />
<#include "/dashboard/mainheader.ftl"/>
    <!-- Left side column. contains the logo and sidebar -->

<#include "/dashboard/mainsidebar.ftl"/>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <section class="absolute-content" id="setting-modal" style="position: absolute;width: 100%;height: 100%;background-color: rgba(255,255,255,.95);display: none;">
            <iframe width="100%" height="100%" frameborder="0"></iframe>
        </section>
        <section class="content">
            <div style="background-color: #ffffff;border-radius: 8px;">
                <div style="font-size: 24px;font-weight: bold;color: #504e6b;padding: 10px;display: flex;align-items: center;">
                    <div>项目管理</div>
                    &nbsp;
                    <a class="btn btn-info btn-sm" onclick="create(this)" data-toggle="modal"
                       data-target=".editor_modal">
                        创建项目
                    </a>
                </div>
                <hr style="margin: 0;"/>
                <div style="padding: 10px;">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <th style="width: 10px">#</th>
                            <th>项目名称</th>
                            <th>安全域名</th>
                            <th>AppId</th>
                            <th>AppSecret</th>
                        </tr>
                        <#list projects as project>
                        <tr>
                            <td style="word-break: break-all;">${project_index+1}</td>
                            <td style="word-break: break-all;">${project.name}
                                <div>
                                    <a href="#" onclick="editor(this,'${project.id}')"
                                       class="badge bg-light-blue-gradient" data-toggle="modal"
                                       data-target=".editor_modal"><i class="fa fa-pencil"></i></a>
                                    <a href="#" class="badge bg-red" onclick="deleteProject(this,'${project.id}')"><i
                                            class="fa fa-trash"></i></a>
                                </div>
                            </td>
                            <td style="word-break: break-all;">${project.domain}</td>
                            <td style="word-break: break-all;">${project.appId}</td>
                            <td style="word-break: break-all;">${project.appSecret}</td>

                        </tr>
                        </#list>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
    <div class="modal fade editor_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">编辑项目</h4>
                </div>
                <div class="modal-body">
                    <iframe id="edit-frame" frameborder="0" width="100%" height="200px"></iframe>
                </div>
            </div>
        </div>
    </div>
<#include "/dashboard/mainfooter.ftl"/>
</div>
<script>
    function showSetting(e, projectId) {
        $('#setting-modal').fadeIn(400);
        $('#setting-modal iframe').attr('src','/project/setting?projectId='+projectId);
    }
    function deleteProject(e, projectId) {
        $(document).ajaxStart(function () {
            Pace.restart();
        });
        $.post('/project/delete', {projectId: projectId}, function (result) {
            if (result.code == 0) {
                window.location.reload();
            } else {
                //錯誤提示
            }
        }, 'json');
    }

    function editor(e, projectId) {
        var src = '/project/edit?projectId=' + projectId;
        $('#edit-frame').attr('src', src);
    }

    function create(e) {
        var src = '/project/create';
        $('#edit-frame').attr('src', src);
    }
</script>
<script src="/js/app.js"></script>
</body>
</html>
